<template>
  <v-container app>
    <v-container>
      <v-content>
        getters:{{ this.$store.getters.count }}
      </v-content>
      <v-content>
        state:{{ this.$store.state.count }}
      </v-content>
      <v-content>
        <div class="row">
          <div class="col col-2">
        <v-btn @click="increment">增加</v-btn>
          </div>
          <div class="col col-2">
        <v-btn @click="add">加2</v-btn>
        </div>
          <div class="col col-2">
        <v-btn @click="addN">加3</v-btn>
        </div>
        </div>
      </v-content>
    </v-container>
  </v-container>
</template>

<script>
export default {
  name: 'echarts3',
  data () {
    return {
      echarts: null
    }
  },
  mounted () {
  },
  beforeDestroy () {
  },
  methods: {
    increment: function () {
      // this.$store.commit('increment')
      this.$store.commit('add', { n: 2 })
    },
    add: function () {
      // this.$store.dispatch('add', { n: 2 })
      this.$store.dispatch('increment')
    },
    addN: function () {
      this.$store.dispatch('addN', { n: 3 })
      // this.$store.dispatch('increment')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
